<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>增删改树节点</title>
    <script src="../../jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../ui/om-core.js"></script>
    <script type="text/javascript" src="../../ui/om-tree.js"></script>
    <link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
    <!-- view_source_begin -->
    <script type="text/javascript">
        var data = [
                    {
                        "text": "node1",
                        "children":
                        [
                            {
                                "text": "node11"
                            },
                            {
                                "text": "node12"
                            }
                        ]
                    },
                    {
                        "text": "node2",
                        "expanded": true,
                        "children":
                            [{
                                "text":"node21",
                                "expanded": true,
                                "children": [{
                                    "text":"node211"
                                },{
                                    "text":"node212"
                                }]
                            },{
                                "text":"node22",
                                "expanded": true,
                                "children": [{
                                    "text":"node221"
                                }]
                            }]
                    },
                    {
                        "text": "node3"
                    },
                    {
                        "text": "node4"
                    }
                ];
        $(document).ready(function(){
            $("#mytree").omTree({
                dataSource : data
            });
        });
        
       function insertNode(){
           var node = {
                   "text" : "new tree node",
                   "classes" : "folder",
                   "children" : [{
                       "text" :"new child node"
                   }]};
           var pnode = $("#mytree").omTree("getSelected");
           $("#mytree").omTree("insert", node, pnode); 
       }
       
       function rNode(){
           var node = $("#mytree").omTree("getSelected");
           $("#mytree").omTree("remove", node);
       }
       
       function modifyNode(){
           var node = $("#mytree").omTree("getSelected");
           var newnode = {"text" : "modify tree node"};
           $("#mytree").omTree("modify", node, newnode);
       }
    </script>
    <!-- view_source_end -->
</head>
<body>
    <!-- view_source_begin -->
    <div id="content">
        <ul id="mytree"></ul>
        <br/>
        <br/>
        <span>选择一个节点为其增加子节点：</span>
        <button onclick="insertNode()">增加节点</button><br/>
        <span>选择一个需要删除节点：</span>
        <button onclick="rNode()">删除节点</button><br/>
        <span>选择一个需要修改的节点：</span>
        <button onclick="modifyNode()">修改节点</button><br/>
    </div>
    <!-- view_source_end -->
    <div id="view-desc">
        <p>omTree提供insert，remove，modify方法增删改树节点。</p>
        <p>insert方法在指定父节点pnode下添加node节点，并且该节点位于beforeNode节点前；<br/>
            remove方法在指定父节点pnode下删除node节点；<br/>
            modify方法在指定父节点pnode下修改node节点为newnode节点。
        </p>        
    </div>
    <script type="text/javascript" src="../common/js/themeloader.js"></script>
</body>
</html>